<template>
    <div class='portlet light bordered'>
        <div class='portlet-title'>
            <div class='caption'>
                <span class='caption-subject bold uppercase font-dark'>日支付金额统计（元）</span>
            </div>
        </div>
        <div class='portlet-body'>
            <div id='chartdiv' style='width: 100%; height: 400px;'></div>
        </div>
    </div>  
</template>

<script>

import moment from 'moment/src/moment.js';
import AmCharts from 'amcharts3/amcharts/amcharts.js';
import 'amcharts3/amcharts/themes/light.js';
import AmSerial from 'amcharts3/amcharts/serial.js'

export default {
    mounted() {
        let date0 = moment().subtract(15, 'days').format('YYYY-MM-DD');
        let date1 = moment().format('YYYY-MM-DD');        
        this.initChart(date0, date1);
    },
    methods: {
        // 初始化支付统计曲线
        initChart(date0, date1) {
            this.$DashboardService.StatPaymentTotalPrice(date0, date1)
                .then(ret => {
                    var chart = window.AmCharts.makeChart('chartdiv', {
                        'type': 'serial',
                        'theme': 'light',
                        'dataProvider': ret,
                        'legend': {
                            'useGraphSettings': true
                        },                        
                        'categoryField': 'Date',
                        'categoryAxis': {
                            categoryFunction(category, dataItem, categoryAxis) {
                                return window.AmCharts.formatDate(new Date(category), 'MM-DD');
                            },
                            'dateFormats': [{'period':'DD','format':'MM-DD'}],
                            'minPeriod': 'DD'
                        },     
                        "valueAxes": [{
                            "id": "priceAxis",
                            "gridAlpha": 0,
                            "position": "left"
                        }, {
                            "id": "totalCountAxis",
                            "position": "right"
                        }],                   
                        'graphs': [{
                            'title': '支付金额',
                            'balloonText': '支付金额: <b>[[value]]</b> 元',
                            'fillAlphas': 0.8,
                            'lineAlpha': 0.2,
                            'labelText': '[[value]] 元',
                            'type': 'column',
                            'valueField': 'TotalPrice',
                            'valueAxis': 'priceAxis'
                        }, {
                            'title': '审核金额',
                            'balloonText': '审核金额: <b>[[value]]</b> 元',
                            'fillAlphas': 0.8,
                            'lineAlpha': 0.2,
                            'labelText': '[[value]] 元',
                            'type': 'column',
                            'clustered': false,
                            'columnWidth': 0.5,                            
                            'valueField': 'AuditPrice',
                            'valueAxis': 'priceAxis'
                        }, {
                            "id": "graph2",
                            "balloonText": "支付数量: <b>[[value]]</b> 笔",
                            "bullet": "round",
                            "lineThickness": 3,
                            "bulletSize": 7,
                            "bulletBorderAlpha": 1,
                            "bulletColor": "#FFFFFF",
                            "useLineColorForBulletBorder": true,
                            "bulletBorderThickness": 3,
                            "fillAlphas": 0,
                            "lineAlpha": 1,
                            "title": "支付数量",
                            "valueField": "TotalCount",
                            "valueAxis": "totalCountAxis",
                            "dashLengthField": "dashLengthLine"
                        }]
                    });
                });            
        }
    }
}
</script>

<style>

</style>
